<template>
	<custom-page title="详情" textStyle="white" borderBottomColor="transparent" nav-background-color="transparent"
		backgroundColor="#000000">
		<template #page>
			<view class="page-content" v-if="formSupport">
				<video class="video-layout" :src="squareVideoInfo.videoAddress" :autoplay="true" :controls="false"></video>
				<view class="bottom-layout" v-if="isShowInfo == '1'">
					<view class="operation-row" v-if="isOperation == '1'">
						<view class="show-view">
							<image
								:src="(squareVideoInfo.isShow=='0')?asserts.ic_setting_public_white:asserts.ic_setting_private_white">
							</image>
							<view>{{squareVideoInfo.isShow=='0'?'公开可见':'仅自己可见'}}</view>
						</view>
						<image class="operation-img" :src="asserts.ic_more" @click="moreClick"></image>
					</view>
					<view class="name-row">
						<view>@{{squareVideoInfo.userName}}</view>
						<view class="follow" v-if="false">关注</view>
					</view>
					<view class="content">{{squareVideoInfo.tittle}}</view>
				</view>
				<view class="right-col">
					<image class="head-img" :src="squareVideoInfo.sculptureUrl" @click="assistantClick"></image>
					<!-- <image class="collect-img"></image> -->
				</view>
			</view>
		</template>
	</custom-page>
</template>

<script>
	export default {
		data() {
			return {
				isShowInfo: '1',
				isOperation: '0',
				squareVideoInfo: {},
				formSupport: true
			}
		},
		onLoad(val) {
			if(val.isShowInfo){
				this.isShowInfo = val.isShowInfo
			}
			if(val.isOperation){
				this.isOperation = val.isOperation
			}
			
			this.requestCenter.getSystemConfig().then(res => {
				this.formSupport = res.formSupport
			})
			
			//页面传值
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('squareVideoInfo', (data) => {
				this.squareVideoInfo = data.data
			})
		},
		methods: {
			//点击更多
			moreClick() {
				uni.showActionSheet({
					itemList: ['删除'],
					success: (res) => {
						let params = {
							id: this.squareVideoInfo.id
						}
						this.requestCenter.deleteVideoImage(params).then(res => {
							uni.showToast({
								title: "删除成功",
								duration: 500,
								complete: () => {
									const eventChannel = this.getOpenerEventChannel();
									eventChannel.emit('videoRelease')
									uni.navigateBack()
								}
							})
						})
					}
				});
			},
			
			//点击助教
			assistantClick(){
				uni.navigateTo({
					url: `/pages/assistant-detaill/assistant-detaill?userId=${this.squareVideoInfo.updateUserId}`
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page-content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.video-layout {
		flex: 1;
		width: 100%;
		background-color: antiquewhite;
	}
	.right-col{
		position: absolute;
		top: 46%;
		right: 30rpx;
		.head-img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
		.collect-img{
			width: 100rpx;
			height: 100rpx;
			background-color: red;
			margin-top: 30rpx;
			border-radius: 50%;
		}
	}

	.bottom-layout {
		display: flex;
		flex-direction: column;
		padding: 10rpx 48rpx 32rpx 30rpx;
		box-sizing: border-box;

		.operation-row {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 32rpx;

			.show-view {
				display: flex;
				flex-direction: row;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 40rpx;

				image {
					width: 28rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}
			}

			.operation-img {
				width: 64rpx;
				height: 64rpx;
			}
		}

		
		.name-row {
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 48rpx;

			

			.follow {
				width: 136rpx;
				background-color: #FA384E;
				height: 64rpx;
				line-height: 64rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
				border-radius: 40rpx;
				margin-left: 32rpx;
			}
		}

		.content {
			margin-top: 16rpx;
			font-size: 28rpx;
			color: #F9F9F9;
			line-height: 36rpx;
		}
	}
</style>
